<template>
  <div class="">
    <Breadcrumb>
        <BreadcrumbItem to="/">首页</BreadcrumbItem>
        <BreadcrumbItem to="/components/breadcrumb">操作管理</BreadcrumbItem>
        <BreadcrumbItem>列表</BreadcrumbItem>
    </Breadcrumb>
    <Form ref="formInline" :model="formInline" inline >
        <div class="search">
        <FormItem prop="user">
            <Input type="text" v-model="formInline.operatorName" placeholder="操作名称">
            </Input>
        </FormItem>
        <FormItem>
            <Button type="primary" icon="ios-search" size='small' @click="getListData">查询</Button>
            <Button type="primary" icon="ios-add-circle-outline" size='small'  @click="edit">新增</Button>
        </FormItem>
        
        </div>
    </Form>
    <Table  stripe border :columns="columns" :data="data" :loading="loading" size="small"></Table>
    <Page ref="page" :total="totalRow" show-total show-elevator @on-change="nextPage" :current="pageNo"></Page>
  </div>
</template>
<script>
export default {
  data(){
    return{
      formInline:{
        operatorName:'',
      },
      loading:true,
      pageNo:1,
      totalRow:0,
      data:[],
      columns:[
        {title: '操作ID', key: 'OPERATOR_ID'},
        {title: '所属菜单', key: 'MENU_NAME'},
        {title: '操作名称', key: 'OPERATOR_NAME'},
        {title: '操作按钮图片', key: 'OPERATOR_IMAGE'},
        {title: '状态', key: 'OPERATOR_STATE',render:(h,params)=>{
          //console.log('params',params)
          var style = 'color:rgb(250,0,0)'
          var state = "停用"
          if(params.row.OPERATOR_STATE =='1'){
            style = 'color:rgb(50, 205, 50)'
            state = "启用"
          }
          return h('span',{
            attrs:{
              style:style
            }
          },state)
        }},
        {title: '排序值', key: 'OPERATOR_LEVEL'},
        {title: '操作', key: 'action',width:150,render: (h, params) => {
          //console.log('params',params)
          var button = [];
          button.push(
            h('span', {
                props: {
                    type: 'text',
                    size: 'small'
                },
                attrs: {
                    class: 'first-span'
                },
                on:{
                  click:()=>{
                    this.$Message.info('查看')
                  }
                }
            }, '查看')
          )
          if(this.$store.getters.getUser.operatorList.includes('20')){
            button.push(
              h('span', 
                {
                  props: {
                      type: 'text',
                      size: 'small'
                  },
                  attrs: {
                      class: 'final-span'
                  },
                  on:{
                    click:()=>{
                      var userAcctId = params.row.USER_ACCT_ID
                      this.$router.push({name:'userEdit',params:{userAcctId}});
                      //this.$Message.info('编辑')
                    }
                  }
                } , '编辑')
            )
          }
          
          return h('div', {
            attrs: {
                  class: 'table-button'
              }
          },button);
        }}
      ]
    }
  },
  created(){
    this.getListData()
  },
  methods:{
    nextPage(page){
      this.pageNo = page
      this.getListData()
    },
    getListData(){
      this.$fetch('sys/operatorList',{
        operatorName:this.formInline.operatorName,
        pageNo:this.pageNo,
        pageSize:10
      })
      .then(result=>{
        var res = result
        console.log('operatorList=',res)
        this.loading = false
        if(res.success){
          this.data = res.data.result
          this.totalRow = res.data.totalRow
        }
        //console.log('res',res)
      })
    },
    edit(){
      this.$router.push({name:'userEdit',params:{userAcctId:''}});
    }
  }
}
</script>
<style lang="scss" >
.ivu-form-item{
  margin-bottom:10px;
}

</style>


